<template>
    <div>
        <!-- 新闻内容 -->
        <div class="newsinfo-container">
            <!-- {{id}} -->
            <h3 class="title">
                {{newsContent.title}}
            </h3>
            <p class="info">
                <span>发表时间:{{newsContent.add_time | dateFormat}}</span>
                <span>点击：{{newsContent.click}}次</span>
            </p>
            <hr>
            <div class="content" v-html="newsContent.zhaiyao"></div>
        </div>
        <!-- 添加 评论 子组件区域 -->
        <div class="comment">
            <comment :newsid=id></comment>
        </div>
    </div>
</template>


<script>
// 引入 评论 子组件
import comment from '../sub-components/Comment.vue'

export default {
    props:['id'],// 接收传参 ，模板里用插值表达式，方法里用 this.id
    data:function () {
        return {
            newsContent:{},
        }
    },
    created:function () {
        this.getNewsInfo();
    },
    methods:{
        async getNewsInfo(){
            // const {data} = await this.$http("/api/getnew/:id");
            const {data} = await this.$http("/api/getnewslist");
            console.log(data);
            if(data.status===0) {
                const index=data.message.findIndex(item=>{
                    return item.id==this.id;
                })
                this.newsContent=data.message[index];
            }
        }
    },
    // 注册 评论区域 子组件
    components:{
        comment
    }

}
</script>


<style lang="scss" scoped>
.newsinfo-container{
    .title{
        font-size: 14px;
        text-align: center;
        color: red;
        margin: 15px 0 ;
    }
    .info{
        color: blue;
        display: flex;
        justify-content: space-between;
        margin: 0 10px;
    }
    .content{
        text-indent: 2em;
        padding: 0 10px;
        color: rgb(80, 80, 80);
        font-size: 14px;
    }
}
</style>

















